<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="80%" top="10vh"  destroy-on-close @closed="$emit('closed')" align-center="true" :close-on-click-modal="false">
        <el-container>
            <el-main>
                <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="110px" label-position="right" style="height:650px">
                    <el-tabs tab-position="top">
                        <el-tab-pane label="基本信息" v-if="baseInfo">
                            <el-row :gutter="1" >
                                <el-col :span="8">
                                    <el-form-item label="设备类别" prop="class_id">
                                        <el-select v-model="form.class_id"  filterable style="width: 100%" placeholder="请选择设备类别" clearable>
                                            <el-option v-for="item in classList" :key="item.id" :label="item.title" :value="item.id"/>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="设备代码" prop="code">
                                        <div style="display:flex;width:100%">
                                            <el-input v-model="form.code" placeholder="请输入设备代码" @input="input" @blur="genQR" clearable style="width:100%"></el-input>
                                            <el-button @click="genQR">生成</el-button>
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="设备名称" prop="title">
                                        <el-input v-model="form.title" placeholder="请输入设备名称" clearable style="width:100%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="1" >
                                <el-col :span="8">
                                    <el-form-item label="设备型号" prop="spec">
                                        <el-input v-model="form.spec" placeholder="请输入设备型号" clearable style="width:100%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="设备状态" prop="state_id">
                                        <el-select v-model="form.state_id"  filterable style="width: 100%" placeholder="请选择设备状态" clearable>
                                            <el-option v-for="item in stateList" :key="item.id" :label="item.title" :value="item.id"/>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="入场时间" prop="in_date">
                                        <el-date-picker v-model="form.in_date" :value-format="'YYYY-MM-DD'"  style="width:100%" type="date" placeholder="请选择入场时间" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="1" >
                                <el-col :span="8">
                                    <el-form-item label="所属组织" prop="org_id">
                                        <el-select v-model="form.org_id"  filterable style="width: 100%" placeholder="请选择所属组织" clearable @change="orgChange">
                                            <el-option v-for="item in orgList" :key="item.id" :label="item.title" :value="item.id"/>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所属部门" prop="dep_id">
                                        <el-select v-model="form.dep_id"  filterable style="width: 100%" placeholder="请选择所属部门" clearable @change="deptChange">
                                            <el-option v-for="item in depList" :key="item.id" :label="item.name" :value="item.id"/>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="部门负责人" prop="remark">
                                        <el-input v-model="leader_name" style="width:100%" readonly></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="1">
                                <el-col :span="8">
                                    <el-form-item label="设备负责人" prop="director_ids">
                                        <el-select v-model="form.director_ids"  filterable style="width: 100%" placeholder="请选择负责人" multiple>
                                            <el-option v-for="item in humList" :key="item.id" :label="item.name" :value="item.id"/>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="备注" prop="remark">
                                        <el-input v-model="form.remark" placeholder="请输入备注" clearable style="width:100%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="1">
                                <el-col :span="8">
                                <el-form-item label="设备图片" prop="img">
                                        <sc-upload v-model="form.img" draggable></sc-upload>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="二维码" prop="qrcode">
                                        <el-image v-if="form.qrcode" :src="form.qrcode" style="width:148px;height:148px"></el-image>
                                        <div v-else></div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="位置信息" v-if="positionInfo">
                            <el-row :gutter="1">
                                <el-col :span="8">
                                    <el-form-item label="区域" prop="position_id">
                                        <el-select v-model="form.position_id"  filterable style="width: 100%" placeholder="请选择区域" clearable>
                                            <el-option v-for="item in locationList" :key="item.id" :label="item.title" :value="item.id"/>
                                        </el-select>
                                        <!-- <el-input v-model="form.region" placeholder="请输入区域"></el-input> -->
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="安装地点" prop="place">
                                        <el-input v-model="form.place" placeholder="请输入安装地点"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="产线" prop="line">
                                        <el-input v-model="form.line" placeholder="请输入产线"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="1">
                                <el-col :span="24">
                                    <el-form-item label="备注" prop="position_remark">
                                        <el-input v-model="form.position_remark" type="textarea"  placeholder="请输入备注" clearable style="width:100%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="制造商信息" v-if="applyInfo">
                            <el-row :gutter="1">
                                <el-col :span="8">
                                    <el-form-item label="供应商" prop="apply_id">
                                        <el-select v-model="form.apply_id"  filterable style="width: 100%" placeholder="请选择供应商" >
                                            <el-option v-for="item in applyList" :key="item.id" :label="item.name" :value="item.id"/>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="出厂编号" prop="factory_code">
                                        <el-input v-model="form.factory_code" placeholder="请输入出厂编号"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="制造日期" prop="make_date">
                                        <el-date-picker v-model="form.make_date" :value-format="'YYYY-MM-DD'"  style="width:100%" type="date" placeholder="请选择制造日期" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="1">
                                <el-col :span="8">
                                    <el-form-item label="备注" prop="make_remark">
                                        <el-input v-model="form.make_remark" placeholder="请输入备注" clearable style="width:100%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="使用期限" prop="term">
                                        <el-input v-model="form.term" placeholder="请输入期限" clearable style="width:100%">
                                            <template #append>月</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="验收日期" prop="check_date">
                                        <el-date-picker v-model="form.check_date" :value-format="'YYYY-MM-DD'"  style="width:100%" type="date" placeholder="请选择验收日期" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="财务信息" v-if="assetInfo">
                            <el-row :gutter="1">
                                <el-col :span="8">
                                    <el-form-item label="资产类别" prop="asset_class_id">
                                        <el-select v-model="form.asset_class_id"  filterable style="width: 100%" placeholder="请选择资产类别" >
                                            <el-option v-for="item in assetList" :key="item.id" :label="item.title" :value="item.id"/>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="资产卡片" prop="asset_card">
                                        <el-input v-model="form.asset_card" placeholder="请输入资产卡片" clearable style="width:100%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="制造日期" prop="asset_make_date">
                                        <el-date-picker v-model="form.asset_make_date" :value-format="'YYYY-MM-DD'" style="width:100%" type="date" placeholder="请选择制造日期" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="1">
                                <el-col :span="8">
                                    <el-form-item label="备注" prop="asset_make_remark">
                                        <el-input v-model="form.asset_make_remark" placeholder="请输入备注" clearable style="width:100%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="使用期限" prop="asset_term">
                                        <el-input v-model="form.asset_term" placeholder="请输入期限" clearable style="width:100%">
                                            <template #append>月</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="验收日期" prop="asset_check_date">
                                        <el-date-picker v-model="form.asset_check_date" :value-format="'YYYY-MM-DD'" style="width:100%" type="date" placeholder="请选择验收日期" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="维保信息" v-if="mainInfo">
                            <el-row :gutter="1">
                                <el-col :span="8">
                                    <el-form-item label="保修期" prop="period">
                                        <el-input v-model="form.period" placeholder="请输入期限" clearable style="width:100%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="维保单位" prop="maintenance_company">
                                        <el-input v-model="form.maintenance_company" placeholder="请输入维保单位"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="维保电话" prop="maintenance_tel">
                                        <el-input v-model="form.maintenance_tel" placeholder="请输入维保电话" clearable style="width:100%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="1">
                                <el-col :span="24">
                                    <el-form-item label="备注" prop="maintenance_remark">
                                        <el-input v-model="form.maintenance_remark" type="textarea" placeholder="请输入备注" clearable style="width:100%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="特种设备" v-if="specialInfo">
                            <el-row :gutter="1">
                                <el-col :span="8">
                                    <el-form-item label="检验到期日" prop="due_date">
                                        <el-date-picker v-model="form.due_date" :value-format="'YYYY-MM-DD'" style="width:100%" type="date" placeholder="请选择检验到期日" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="到期日提醒" prop="remind">
                                        <el-input v-model="form.remind" placeholder="请输入到期日提醒" clearable style="width:100%">
                                            <template #append>天</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="附属设备" v-if="subInfo">
                            <el-row :gutter="1">
                                <el-col :span="8">
                                    <el-form-item label="设备名称" prop="sub_title">
                                        <el-input v-model="form.sub_title" placeholder="请输入附属设备名称" clearable style="width:100%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="注意事项" prop="note">
                                        <el-input v-model="form.note" placeholder="请输入注意事项" clearable style="width:100%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="零部件信息" v-if="partsInfo">
                            <el-form-item label="零部件信息" prop="info">
                                <div class="table">
                                    <div class="header">
                                        <div class="addIcon">
                                            <el-button type="primary" circle icon="el-icon-plus" size="small" @click="addInfo"></el-button>
                                        </div>
                                        <div class="addChildIcon">
                                            <!-- <el-button type="primary" circle icon="el-icon-plus" size="small"></el-button> -->
                                        </div>
                                        <div class="addChildIcon">层级</div>
                                        <div class="name">部件编码</div>
                                        <div class="name">部件名称</div>
                                        <div class="name">规格型号</div>
                                        <div class="name">数量</div>
                                        <div class="name">制造商</div>
                                        <div class="name">供应商</div>
                                        <div class="name">备注</div>
                                        <div class="name">操作</div>
                                    </div>
                                    <!-- 一级 -->
                                    <div class="body" v-for="(item,index) in form.info" :key="index">
                                        <div class="display">
                                            <div class="addChildIcon">
                                                <span>{{index + 1}}</span>
                                                <el-button class="delBtn" type="danger" circle icon="el-icon-delete" size="small" @click="delInfo(item,index)"></el-button>
                                            </div>
                                            <div class="addChildIcon" >
                                                <el-button type="primary" circle icon="el-icon-plus" size="small" @click="addChild(item)"></el-button>
                                            </div>
                                            <div class="addChildIcon">
                                                一级
                                            </div>
                                            <div class="name">
                                                <el-input v-model="item.code" placeholder="请输入部件编码"></el-input>
                                            </div>
                                            <div class="name">
                                                <el-input v-model="item.title" placeholder="请输入部件名称"></el-input>
                                            </div>
                                            <div class="name">
                                                <el-input v-model="item.spec" placeholder="请输入规格型号"></el-input>
                                            </div>
                                            <div class="name">
                                                <el-input v-model="item.num" placeholder="请输入数量"></el-input>
                                            </div>
                                            <div class="name">
                                                <el-input v-model="item.maker" placeholder="请输入制造商"></el-input>
                                            </div>
                                            <div class="name">
                                                <el-input v-model="item.apply" placeholder="请输入供应商"></el-input>
                                            </div>
                                            <div class="name">
                                                <el-input v-model="item.remark" placeholder="请输入备注"></el-input>
                                            </div>
                                            <div class="name"></div>
                                        </div>
                                        <!-- 二级 -->
                                            <div class="child" v-for="(item1,index1) in item.child" :key="index1">
                                                <div class="display">
                                                    <div class="dataIndex" style="border:none">
                                                    </div>
                                                    <div class="addChildIcon" >
                                                        <span>{{ 1 + '-' + (index1 + 1)}}</span>
                                                        <el-button class="delBtn" type="danger" circle icon="el-icon-delete" size="small" @click="delChild(item,index1)"></el-button>
                                                    </div>
                                                    <div class="addChildIcon" style="border:none">
                                                        二级
                                                    </div>
                                                    <div class="name">
                                                    <el-input v-model="item1.code" placeholder="请输入部件编码"></el-input>
                                                    </div>
                                                    <div class="name">
                                                        <el-input v-model="item1.title" placeholder="请输入部件名称"></el-input>
                                                    </div>
                                                    <div class="name">
                                                        <el-input v-model="item1.spec" placeholder="请输入规格型号"></el-input>
                                                    </div>
                                                    <div class="name">
                                                        <el-input v-model="item1.num" placeholder="请输入数量"></el-input>
                                                    </div>
                                                    <div class="name">
                                                        <el-input v-model="item1.maker" placeholder="请输入制造商"></el-input>
                                                    </div>
                                                    <div class="name">
                                                        <el-input v-model="item1.apply" placeholder="请输入供应商"></el-input>
                                                    </div>
                                                    <div class="name">
                                                        <el-input v-model="item1.remark" placeholder="请输入备注"></el-input>
                                                    </div>
                                                    <div class="name">
                                                        <el-button type="primary" size="small" @click="addChildChild(item1.child)">添加下级</el-button>
                                                    </div>
                                                </div>
                                                <div class="child" v-for="(item2,index2) in item1.child" :key="index2">
                                                    <div class="display">
                                                        <div class="dataIndex" style="border:none">

                                                        </div>
                                                        <div class="addChildIcon" style="border:none">
                                                            <span>{{ 2 + '-' + (index2 + 1)}}</span>
                                                            <el-button class="delBtn" type="danger" circle icon="el-icon-delete" size="small" @click="delChildChild(item1,index2)"></el-button>
                                                        </div>
                                                        <div class="addChildIcon" style="border:none">
                                                            三级
                                                        </div>
                                                        <div class="name">
                                                        <el-input v-model="item2.code" placeholder="请输入部件编码"></el-input>
                                                        </div>
                                                        <div class="name">
                                                            <el-input v-model="item2.title" placeholder="请输入部件名称"></el-input>
                                                        </div>
                                                        <div class="name">
                                                            <el-input v-model="item2.spec" placeholder="请输入规格型号"></el-input>
                                                        </div>
                                                        <div class="name">
                                                            <el-input v-model="item2.num" placeholder="请输入数量"></el-input>
                                                        </div>
                                                        <div class="name">
                                                            <el-input v-model="item2.maker" placeholder="请输入制造商"></el-input>
                                                        </div>
                                                        <div class="name">
                                                            <el-input v-model="item2.apply" placeholder="请输入供应商"></el-input>
                                                        </div>
                                                        <div class="name">
                                                            <el-input v-model="item2.remark" placeholder="请输入备注"></el-input>
                                                        </div>
                                                        <div class="name">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-tab-pane>
                    </el-tabs>
                </el-form>
            </el-main>
            <el-footer>
                <div style="display: flex;justify-content: end;">
                    <el-button @click="visible = false">取 消</el-button>
                    <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
                </div>
            </el-footer>
        </el-container>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增设备',
				edit: '编辑设备',
				show: '查看'
			},
			visible: true,
			isSaveing: false,
            leader_name:"",
			//表单数据
			form: {
				id: "",
				class_id: "",
				code: "",
				sort: "",
                title:"",
                spec:"",
                state_id:"",
                qrcode:"",
                img:"",
                in_date:"",
                org_id:"",
                dep_id:"",
                remark:"",
                region:"",
                place:"",
                line:"",
                position_remark:"",
                apply_id:"",
                factory_code:"",
                check_date:"",
                make_date:"",
                make_remark:"",
                term:"",
                asset_class_id:"",
                asset_card:"",
                asset_check_date:"",
                asset_make_date:"",
                asset_term:"",
                asset_make_remark:"",
                period:"",
                maintenance_company:"",
                maintenance_tel:"",
                maintenance_remark:"",
                due_date:"",
                remind:"",
                sub_title:"",
                note:"",
                director_ids:"",
				is_default: 0,
				system_disable: 0,
                info:[]
			},
			//验证规则
			rules: {
                class_id: [
					{ required: true, message: '请选择类别' }
				],
				code: [
					{ required: true, message: '请输入设备编号' }
				],
                title: [
					{ required: true, message: '请输入设备名称' }
				],
                state_id: [
					{ required: true, message: '请输入设备状态' }
				],
                org_id: [
					{ required: true, message: '请选择所属组织' }
				],
                dep_id: [
					{ required: true, message: '请输入所属部门' }
				]
            },
            classList:[],
            stateList:[],
            depList:[],
            orgList:[],
            applyList:[],
            assetList:[],
            locationList:[],
            humList:[],//人员
            addTemplate:{},
            buJianList:[],
            baseInfo:"",
            positionInfo:"",
            applyInfo:"",
            assetInfo:"",
            mainInfo:"",
            specialInfo:"",
            subInfo:"",
            partsInfo:"",
		}
	},
	mounted() {
        this.getDeviceClass()
        this.getDeviceState()
        this.getOrg()
        this.getApply()
        this.getAssetClass()
        this.getLocation()
        this.getHum()
        this.baseInfo = this.$TOOL.data.get("PERMISSIONS").includes('deviceDetail.baseInfo')
        this.positionInfo = this.$TOOL.data.get("PERMISSIONS").includes('deviceDetail.positionInfo')
        this.applyInfo = this.$TOOL.data.get("PERMISSIONS").includes('deviceDetail.applyInfo')
        this.assetInfo = this.$TOOL.data.get("PERMISSIONS").includes('deviceDetail.assetInfo')
        this.mainInfo = this.$TOOL.data.get("PERMISSIONS").includes('deviceDetail.mainInfo')
        this.specialInfo = this.$TOOL.data.get("PERMISSIONS").includes('deviceDetail.specialInfo')
        this.subInfo = this.$TOOL.data.get("PERMISSIONS").includes('deviceDetail.subInfo')
        this.partsInfo = this.$TOOL.data.get("PERMISSIONS").includes('deviceDetail.partsInfo')
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit() {
            console.log('this.buJianList :>> ', this.buJianList);
            let a = String(this.form.director_ids)
            this.form.director_ids = a
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					if (this.form.id) {
						res = await this.$API.device.deviceList.edit.post(this.form);
					} else {
						res = await this.$API.device.deviceList.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", { type: 'error' })
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		async setData(data) {
            console.log('data :>> ', data);
			this.form.id = data.id
			this.form.class_id = data.class_id
			this.form.code = data.code
			this.form.sort = data.sort
			this.form.title = data.title
			this.form.spec = data.spec
			this.form.state_id = data.state_id
			this.form.dep_id = data.dep_id
            this.leader_name = data.dep_admin

			this.form.in_date = data.in_date
			this.form.org_id = data.org_id
			this.form.remark = data.remark
			this.form.img = data.img
			this.form.qrcode = data.qrcode
			this.form.region = data.region
			this.form.position_id = data.position_id
			this.form.place = data.place
			this.form.line = data.line
			this.form.position_remark = data.position_remark
			this.form.apply_id = data.apply_id
			this.form.factory_code = data.factory_code
			this.form.check_date = data.check_date
			this.form.make_date = data.make_date
			this.form.term = data.term
			this.form.make_remark = data.make_remark
			this.form.asset_class_id = data.asset_class_id
			this.form.asset_card = data.asset_card
			this.form.asset_check_date = data.asset_check_date
			this.form.asset_make_date = data.asset_make_date
			this.form.asset_term = data.asset_term
			this.form.asset_make_remark = data.asset_make_remark
			this.form.period = data.period
			this.form.maintenance_company = data.maintenance_company
			this.form.maintenance_tel = data.maintenance_tel
			this.form.maintenance_remark = data.maintenance_remark
			this.form.due_date = data.due_date
			this.form.remind = data.remind
			this.form.sub_title = data.sub_title
			this.form.note = data.note
            this.form.info = data.info
            this.form.director_ids = data.director_ids && data.director_ids.split(',').map(Number)
            var res = await this.$API.all.getDep.get({is_page:0,org_id:data.org_id});
            this.depList = res.data;
		},
        // 设备类别
        async getDeviceClass(){
            var res = await this.$API.all.getDeviceClass.get({is_page:0});
            this.classList = res.data;
        },
        // 设备状态
        async getDeviceState(){
            var res = await this.$API.all.getDeviceState.get({is_page:0});
            this.stateList = res.data;
        },
        // 组织
        async getOrg(){
            var res = await this.$API.all.getOrg.get({is_page:0});
            this.orgList = res.data;
        },
        // 组织获取部门
        async orgChange(e){
            var res = await this.$API.all.getDep.get({is_page:0,org_id:e});
            this.depList = res.data;
        },
        deptChange(e){
            this.depList.map(item=>{
                if(e==item.id){
                    this.leader_name = item.leader_name
                }
            })
        },
        // 供应商
        async getApply(){
            var res = await this.$API.all.getApply.get({is_page:0});
            this.applyList = res.data;
        },
        // 资产类别
        async getAssetClass(){
            var res = await this.$API.all.getAssetClass.get({is_page:0});
            this.assetList = res.data;
        },
        // 设备位置
        async getLocation(){
            var res = await this.$API.all.getPosition.get({is_page:0});
            this.locationList = res.data;
        },
        // 人员
        async getHum(){
            var res = await this.$API.all.getAdmin.get({is_page:0});
            this.humList = res.data
        },
        // 生成二维码
        async genQR(){
            if(this.form.code==''){
                this.$message.error("请先输入设备码")
                return
            }
            var res = await this.$API.all.gerQrcode.post({code:this.form.code});
            if(res.code==1){
                this.$message.success("生成成功")
                this.form.qrcode = res.data.path
            }
        },
        input(){
            if(this.form.code==''){
                this.form.qrcode = ''
            }
        },
        addInfo(){
            this.form.info.push({
                code:"",
                title:"",
                num:"",
                maker:"",
                apply:"",
                remark:"",
                child:[],
            })
        },
        delInfo(item,index){
            this.form.info.splice(index,1)
        },
        addChild(item){
            item.child.push({
                code:"",
                title:"",
                num:"",
                maker:"",
                apply:"",
                remark:"",
                child:[],
            })
        },
        delChild(item,index){
            item.child.splice(index,1)
        },
        addChildChild(item){
            item.push({
                code:"",
                title:"",
                num:"",
                maker:"",
                apply:"",
                remark:"",
            })
        },
        delChildChild(item,index){
            item.child.splice(index,1)
        }
	}
}
</script>

<style lang="scss">
.table{
    border: 1px solid #e6e6e6;
    width: 100%;
    margin-bottom: 10px;
    .header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        border-bottom: 1px solid #e6e6e6;
        .addIcon,.addChildIcon{
            width: 5%;
            border-left: 1px solid #e6e6e6;
            border-right: 1px solid #e6e6e6;
            padding: 10px;
        }
        .name{
            width: 12.5%;
            border-left: 1px solid #e6e6e6;
            border-right: 1px solid #e6e6e6;
            padding: 10px;
        }
    }
    .body{
        .display{
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: center;
            border-bottom: 1px solid #e6e6e6;
            .dataIndex,.addChildIcon{
                width: 5%;
                border-left: 1px solid #e6e6e6;
                border-left: 1px solid #e6e6e6;
                padding: 10px;
                display: flex;
                justify-content: center;
            }
            .name{
                width: 12.5%;
                border-left: 1px solid #e6e6e6;
                border-right: 1px solid #e6e6e6;
                padding: 10px;
            }
        }
        .child{
            .display{
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align: center;
                border-bottom: 1px solid #e6e6e6;
                .dataIndex,.addChildIcon{
                    width: 5%;
                    border-left: 1px solid #e6e6e6;
                    border-right: 1px solid #e6e6e6;
                    padding: 10px;
                    display: flex;
                    justify-content: center;
                }
                .name{
                    width: 12.5%;
                    border-left: 1px solid #e6e6e6;
                    border-right: 1px solid #e6e6e6;
                    padding: 10px;
                }
            }
        }
    }
}
.addChildIcon span {
    display: block;
}

.addChildIcon:hover span {
    display: none;
}

.addChildIcon .delBtn {
    display: none;
}

.addChildIcon:hover .delBtn {
    display: block;
}
</style>
